<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogIssueDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogIssueDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    @close="closeDialog(false)"
  >
    <el-container>
      <el-header v-loading="loading" style="height: 200px">
        <el-descriptions title="工资单信息" :column="3">
          <el-descriptions-item label="劳务公司">{{ detailInfo.corpName }}</el-descriptions-item>
          <el-descriptions-item label="总支出额">{{ detailInfo.totalExpenditure }}</el-descriptions-item>
          <el-descriptions-item label="发放月份">{{ detailInfo.month }}</el-descriptions-item>
          <el-descriptions-item label="当月应考勤天数">{{ detailInfo.days }}</el-descriptions-item>
          <el-descriptions-item label="当月计价">{{ detailInfo.totalValuation }}</el-descriptions-item>
          <el-descriptions-item label="剩余合同金额">{{ detailInfo.remainingAmount }}</el-descriptions-item>
          <el-descriptions-item label="代发状态">
            <el-tag v-if="detailInfo.wageStatus == 0" type="info"> {{ detailInfo.wageStatusName }}</el-tag>
            <el-tag v-if="detailInfo.wageStatus == 1">{{ detailInfo.wageStatusName }}</el-tag>
            <el-tooltip
              v-if="detailInfo.wageStatus == 1 && detailInfo.queryResultResponse.length > 0"
              class="box-item"
              effect="light"
              :content="detailInfo.queryResultResponse"
              placement="top"
            >
              <el-text type="danger"
                ><el-icon><WarningFilled /></el-icon
              ></el-text>
            </el-tooltip>

            <el-tag v-if="detailInfo.wageStatus == 2" type="warning">{{ detailInfo.wageStatusName }}</el-tag>
            <el-tag v-if="detailInfo.wageStatus == 3" type="success">{{ detailInfo.wageStatusName }}</el-tag>
            <el-tag v-if="detailInfo.wageStatus == 4" type="danger">{{ detailInfo.wageStatusName }}</el-tag>
            <el-tag v-if="detailInfo.wageStatus == -1" type="info">{{ detailInfo.wageStatusName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="代发批次号">{{ detailInfo.batchNo }}</el-descriptions-item>
          <el-descriptions-item label="总金额">{{ detailInfo.amountApplied }}</el-descriptions-item>
          <el-descriptions-item label="成功金额">{{ detailInfo.successfulAmount }}</el-descriptions-item>
          <el-descriptions-item label="失败金额">{{ detailInfo.failureAmount }}</el-descriptions-item>
          <el-descriptions-item label="成功人数">{{ detailInfo.wageSuccessPersonCount }}</el-descriptions-item>
        </el-descriptions>
      </el-header>
      <el-main>
        <el-descriptions title="工资单明细"> </el-descriptions>
        <el-card>
          <el-form ref="queryFormRef" :model="queryForm" :inline="true">
            <!-- StartDate  EndDate -->
            <el-form-item>
              <el-select v-model="queryForm.group" placeholder="请选择班组" clearable>
                <el-option v-for="item in groups" :key="item" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.status" placeholder="发放状态" clearable>
                <el-option v-for="item in status" :key="item" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="queryForm.keywords"
                placeholder="请输入身份证号/姓名/银行卡号"
                clearable
                style="width: 200px"
              />
              <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px; margin-top: 20px"
            border
            default-expand-all
            :height="370"
          >
            <el-table-column prop="groupName" label="劳务班组" width="100" />
            <el-table-column prop="personName" label="姓名" width="80"> </el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="160" />
            <el-table-column prop="bankName" label="开户行" width="150" />
            <el-table-column prop="personBankNo" label="银行卡号" width="150" />
            <el-table-column prop="amountApplied" label="应发金额" width="130" />
            <el-table-column prop="amountPaid" label="实发金额" width="130" />
            <el-table-column prop="statusName" label="发放状态" width="80">
              <template #default="scope">
                <el-tag v-if="scope.row.status === 0" type="info">{{ scope.row.statusName }}</el-tag>
                <el-tag v-if="scope.row.status === 1" type="success">{{ scope.row.statusName }}</el-tag>
                <el-tooltip
                  v-if="scope.row.status === -1"
                  effect="light"
                  :content="scope.row.failReason"
                  placement="top"
                >
                  <el-tag type="danger">{{ scope.row.statusName }}</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="issueTime" label="发放时间" width="130" />
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useScreen } from "@/store/modules/screen";
import { PayrollDetail } from "@/api/wage/index";
import { Add } from "@/utils/decimal";

//声明变量
const screenStore = useScreen();
const groups = ref<any>([]);
const status = ref<any>([]);
//查询条件
const queryForm = reactive({
  keywords: "",
  group: "",
  status: "",
});
const mobile = computed(() => screenStore.device);
const screenWidth = ref(1200);
const props = defineProps({
  dialogIssueDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      footBtn: "详情",
      id: 0,
    }),
  },
});
const { dialogIssueDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);

//工资信息
const detailInfo = ref({} as any);
const tableData = ref();

const handleQuery = () => {
  let tableList = [];
  if (queryForm.group.length > 0) {
    tableList = detailInfo.value.details.filter((i) => i.groupName == queryForm.group);
  } else {
    tableList = detailInfo.value.details;
  }
  if (queryForm.status.length > 0) {
    tableList = tableList.filter((i) => i.statusName == queryForm.status);
  }
  if (queryForm.keywords.length > 0) {
    tableList = tableList.filter(
      (i) =>
        i.personName.includes(queryForm.keywords) ||
        i.idCard.includes(queryForm.keywords) ||
        i.personBankNo.includes(queryForm.keywords)
    );
  }
  tableData.value = tableList;
};
function removeRepeatArrElement(arr) {
  var newArr = [];
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    if (newArr.indexOf(arr[i]) == -1) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

const initForm = function () {
  if (dialogIssueDetail.value.id) {
    loading.value = true;
    //初始化工资信息
    PayrollDetail(dialogIssueDetail.value.id)
      .then((res) => {
        if (res.type == 0) {
          if (res.success) {
            detailInfo.value = res.data;
            tableData.value = res.data.details;
            groups.value = removeRepeatArrElement(res.data.details.map((i) => i.groupName));
            status.value = removeRepeatArrElement(res.data.details.map((i) => i.statusName));
            // resolveTableData();
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
        } else {
          ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
onMounted(() => {
  initForm();
});

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}
:deep(.el-textarea) {
  margin: 0;
}
</style>
